<!--
 * @Author: your name
 * @Date: 2021-11-30 08:46:23
 * @LastEditTime: 2021-12-04 09:40:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /carbon/src/components/Header.vue
-->
<template>
  <div class="header-container" :class="{ fixed: isShow }">
    <div
      class="header-left-container"
      :class="{ isAdd: isAddClass ? true : false }"
    >
      碳信用生态系统
    </div>
    <div class="header-center-container">
      <ul>
        <li
          v-for="item in list"
          :key="item.id"
          :class="{ isAdd: isAddClass ? true : false }"
        >
          <router-link ref="Acontainer" :to="item.link">{{
            item.name
          }}</router-link>
        </li>
      </ul>
    </div>
<!--    <div class="header-right-container">-->
<!--      <div class="login">登入</div>-->
<!--      <div class="createUser">-->
<!--        <el-button type="primary">创建账户</el-button>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          link: "/",
          name: "开始",
        },
        {
          id: 2,
          link: "/wallet",
          name: "碳交易",
        },
        {
          id: 3,
          link: "/carbonFp",
          name: "碳足迹",
        },
        {
          id: 4,
          link: "/league",
          name: "联盟",
        },
      ],
      isShow: false,
      isAddClass: false,
    };
  },
  created() {
    this.$bus.$on("handlerScroll", this.hanlderScroll);
  },
  methods: {
    hanlderScroll(scrollTop) {
      this.isShow = scrollTop >= 300 ? true : false;
    },
    watchFunction() {
      location.hash !== "#/"
        ? (this.isAddClass = true)
        : (this.isAddClass = false);
    },
  },
  watch: {
    $route: function () {
      this.watchFunction();
    },
  },
};
</script>

<style scoped lang="less">
.fixed {
  position: fixed !important;
  height: 72px;
  margin: 0 auto;
  left: 0;
  top: 0;
  right: 0;
  color: #000 !important;
  bottom: 0;
  transition: all 0.2s ease-in-out 0s;
  height: 82px !important;
  z-index: 999;
  box-shadow: 0 1px 5px rgb(195, 186, 186);
  background: rgb(241, 247, 253);
  box-sizing: border-box;
  a {
    color: #000 !important;
  }
}

.isAdd a,
.isAdd {
  color: #000 !important;
}
.header-container {
  height: 110px;
  display: flex;
  position: relative;
  z-index: 99;
  justify-content: space-between;
  transition: 0.5s;
  align-items: center;
  box-sizing: border-box;
  padding: 0 200px;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  .header-center-container {
    ul {
      display: flex;
      justify-content: space-between;
      li {
        margin: 8px 24px;
        a {
          color: #fff;
        }
      }
    }
  }
  .header-right-container {
    font-size: 16px;
    display: flex;
    align-items: center;
    .createUser {
      margin-left: 20px;
      el-button {
        padding: 12px 20px;
        font-size: 16px;
        color: rgb(255, 255, 255);
        border-radius: 10px;
      }
    }
  }
}

@media screen and (max-width: 999px) {
  .header-container {
    padding: 0 100px !important;
  }
}

@media screen and (max-width: 760px) {
  .header-container {
    padding: 0 70px !important;
  }
}

@media screen and (max-width: 512px) {
  .header-container {
    padding: 0 50px !important;
  }
}
</style>
